<script setup lang="ts">
import { onMounted } from 'vue'
import Canvas from '@/components/canvas/index.vue'
import { ParticleSystem } from '@/components/canvas/ParticleSystem'

// 画线
function onReady(ctx: CanvasRenderingContext2D | null) {
  if (!ctx)
    return

  // 清空画布
  ctx.clearRect(0, 0, 300, 150)
  // 设置填充色
  // ctx.fillStyle = '#0c0c0c'
  // 绘制矩形
  // ctx.value.fillRect(50, 30, 100, 60)
  // 新建画笔
  ctx.beginPath()
  // 移动到起点
  ctx.moveTo(50, 50)
  // 连接线到对应坐标
  ctx.lineTo(350, 250)
  ctx.lineTo(300, 280)
  // 描边
  ctx.stroke() // 使用stroke折线绘制多边形不会自动闭合
  // 闭合路径
  // ctx.closePath() // 使用这个方法闭合
  // 填充
  ctx.fill()
  // 矩形是常见形状，有单独的方法
  ctx.rect(5, 5, 20, 20)
  ctx.stroke()
  // 其他快捷命令
  ctx.fillRect(30, 5, 20, 20) // 绘制填充的矩形
  ctx.clearRect(32, 8, 10, 10) // 清除矩形范围
}
// 画圆
function onReady1(ctx: CanvasRenderingContext2D | null) {
  if (!ctx)
    return
  ctx.beginPath()
  ctx.fillStyle = '#0c0c0c'
  // 画圆
  ctx.arc(200, 150, 100, 0, 2 * Math.PI)
  ctx.stroke()
  ctx.arc(200, 150, 80, 0, 2 * Math.PI, false)
  ctx.arc(200, 150, 60, 0, 2 * Math.PI)
  ctx.arc(200, 150, 40, 0, 2 * Math.PI, false)
  ctx.arc(200, 150, 20, 0, 2 * Math.PI)
  ctx.stroke()
  // ctx
}
onMounted(() => {
  const _particleSystem = new ParticleSystem('particleCanvas', 50)
})
</script>

<template>
  <div class="contanier">
    <Canvas :width="400" :height="300" @ready="onReady" />
    <Canvas :width="400" :height="300" @ready="onReady1" />
    <!-- <Canvas :width="400" :height="300" @ready="onReady2" /> -->
    <canvas id="particleCanvas" />
  </div>
</template>

<style lang="scss" scoped>
  .contanier{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 0.5rem;
    height: 100%;
    width: 100%;
    #particleCanvas{
      width:400px;
      height: 300px;
    }
  }
</style>
